<template>
  <div class="f-container" style="background-color: #20A0FF;">
    <div class="div-blank"></div>

    <el-card class="box-card loginBox" style="background-color: white">
      <div class="div-center">
        <h1 class="label-center">登 陆 周 报 !</h1>
      </div>
      <br/>
      <el-form :model="form" :rules="rules" ref="loginForm">

        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username" auto-complete="true" placeholder="请输入用户名" @keyup.enter.native="handleLogin"></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" placeholder="请输入密码" type="password" @keyup.enter.native="handleLogin"></el-input>
        </el-form-item>
        </el-form-item>

      </el-form>
      <br/>

      <div class="div-center">
        <el-button class="loginButton" size="large" @click="handleRegister">注册</el-button>
        <el-button type="primary" class="loginButton" size="large" @click="handleLogin">登录</el-button>
      </div>

    </el-card>
  </div>
</template>

<script>
  import {Card,Form,FormItem,Input,Button} from "element-ui";
  export default {
    components:{
      "el-card": Card,
      "el-form":Form,
      "el-form-item":FormItem,
      "el-input":Input,
      "el-button":Button,
    },
    data() {
      return {
        form: {
          username: '',
          password: ''
        },
        rules: {
          username: [
            {required: true, message: '请输入用户名', trigger: 'change'},
          ],
          password: [
            {required: true, message: '最小长度为6', trigger: 'change'},
            {min: 6, message: '最小长度为6', trigger: 'blur'}
          ]
        }
      }
    },
    methods: {
      handleLogin() {
        console.log(" ⛅ 登陆周报！");
        console.log(" ⛅ 点击了登陆");
        console.log(" ⛅ 用户名:" + this.form.username);
        console.log(" ⛅ 密码:" + this.form.password);
        //confirm the input data
        this.$refs['loginForm'].validate((valid) => {
          if (valid) {
            console.log(" ⛅ ok");

            const formData = {
              username: this.form.username,
              password: this.form.password
            };

            this.$store.dispatch('login', formData).then((data) => {
              this.$notify.success({
                title: "欢 迎 ！",
                message: data.user.name
              });
              this.$router.push("/")
            }).catch((err) => {
              this.$notify.error({
                title: '错 误 !',
                message: ' 🌧 ' + err.errmsg
              });
            });
          } else {
            console.log(" 🌧 error");
          }
        });
      },
      handleRegister(){
        this.$router.push({name: 'register'})
      }
    },
    created () {
      console.log('test get week number');
      let src = new Date(2014, 11, 29);
      let date = new Date(src.getTime());
      console.log(src, this.$hhUtil.getWeekNumber(date));
      if(date.getFullYear() != src.getFullYear()) {
        src = date;
      }
      console.log(date, this.$hhUtil.getWeekNumber(date));


    }
  }
</script>

<style scoped>

  .loginBox {
    margin: 0 auto;
    width: 400px;
    color: #20A0FF;
    padding: 30px;
    border-radius: 10px;
  }

  .f-container {
    /**/
  }

  .loginButton {
    margin-top: 10px;
    width: 40%;
  }

</style>
